<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建一个javascript电子表格</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />

  <!-- 导入外部xlsx文件需要以下两个文件 -->
  <script src="./js/jszip.js"></script>
  <script src="./js/xlsx.js"></script>
</head>

<body>
  <h1>4种方式创建一个js电子表格</h1>

  <h2>1、基于外部CSV文件</h2>
  <div id="spreadsheet1"></div>
  <p><button id='download'>导出我的电子表格为CSV格式</button></p>

  <h2>2、基于外部json文件</h2>
  <div id="spreadsheet2"></div>

  <h2>3、基于json对象(隐藏了gender列)</h2>
  <div id="spreadsheet3"></div>

  <h2>4、从XLSX文件导入</h2>
  <p>
    下面的示例使用第三方库从XLSX文件导入数据，该库稍微进行了定制，以改进CSS解析器。
    重要提示:这是一个实验性的实现，并不能保证您的电子表格将被正确解析。
  </p>
  <div id="spreadsheet4"></div>
</body>
<script type="module">
  import { text } from "./js/language.js";

  // 1、基于外部CSV文件
  let mySpreadsheet = jspreadsheet(document.getElementById('spreadsheet1'), {
    csv: './static/1.csv',
    csvHeaders: true,
    tableOverflow: true,
    text,
    columns: [
      { type: 'text', width: 300 },
      { type: 'text', width: 80 },
      { type: 'text', width: 120 },
      { type: 'dropdown', width: 120, source: ['England', 'Wales', 'Northern Ireland', 'Scotland'] },
      { type: 'text', width: 120 },
    ]
  });

  document.getElementById('download').onclick = function () {
    mySpreadsheet.download();
  }

  // 2、基于外部json文件
  let mySpreadsheet2 = jspreadsheet(document.getElementById('spreadsheet2'), {
    url: './static/1.json',
    text,
    columns: [
      { type: 'text', width: 300 },
      { type: 'text', width: 100 },
    ]
  });

  // 3、基于json对象
  jspreadsheet(document.getElementById('spreadsheet3'), {
    data: [
      {
        name: 'Paulo',
        id: '3',
        age: '40',
        gender: 'Male'
      },
      {
        name: 'Cosme Sergio',
        id: '4',
        age: '48',
        gender: 'Male'
      },
      {
        name: 'Jorgina Santos',
        id: '5',
        age: '32',
        gender: 'Female'
      },
    ],
    columns: [
      {
        type: 'text',
        width: '40',
        name: 'id',
        title: 'Id',
      },
      {
        type: 'text',
        width: '200',
        name: 'name',
        title: 'Name',
      },
      {
        type: 'text',
        width: '100',
        name: 'age',
        title: 'Age',
      },
      {
        type: 'hidden',
        name: 'gender'
      },
    ],
    text
  });

  // 4、从XLSX文件导入
  jexcel.fromSpreadsheet('./static/1.xlsx', function (result) {
    if (!result.length) {
      console.error('jspreadsheet: Something went wrong.');
    } else {
      if (result.length == 1) {
        jspreadsheet(document.getElementById('spreadsheet4'), { ...result[0], text });
      } else {
        jexcel.createTabs(document.getElementById('spreadsheet4'), result);
      }
    }
  });
</script>

</html>